<script>
export default {
  _tip_: '下拉选择-单选',
  props: {
    name: {
      type:String,
      default:''
    },
    modelValue: {
      type:[String,Number],
      default:''
    },
    options: {
      type: [Array, Object],
    },
    option_handle: {
      type: [Object, Function]
    }
  },
  emits: ['update:modelValue', 'validate'], //必备事件: 值更新，触发验证
  methods: {
    this_option_handle(row){
      if (typeof this.option_handle === 'function') return this.option_handle(row);
      let key_map = this.option_handle || {};
      let content_key = key_map.content_key || 'content';
      let value_key = key_map.value_key || 'value';
      return {
        content: row[content_key] || '',
        value: row[value_key] || '',
      }
    },
    decode_options(data){
      let res = [];
      if (!data || typeof(data)!='object') return res;
      for (const k in data) {
        let v = data[k];
        let row = {};
        if (typeof(v)=='object'){
          row = Object.assign({},v);
          row = this.this_option_handle(Object.assign({},v));
        }else {
          row['content'] = v;
          row['value'] = k+'';
        }
        res.push(row);
      }
      return res;
    },
  },
  computed: {
    option_list(){
      return this.decode_options(this.options);
    }
  },
  watch: {
    modelValue(){
      // this.$emit('validate', this.modelValue);
    }
  }
}
</script>

<template>
  <el-select :name="name" :modelValue="modelValue" @update:modelValue="$emit('update:modelValue', $event)" style="width: 100%;">
    <el-option v-for="row in option_list" :value="row.value" :label="row.content"></el-option>
  </el-select>
</template>

<style scoped lang="scss">

</style>